<template>
	<view class="power-ranking-container">
		<view class="title">{{title}}</view>
		<view class="content">
			<view class="li" v-for="(item,index) in rankList" :key="index">
				<text class="position" :style=" index < 3 ? 'color: #F38A64;' : '' ">{{ index + 1 }}</text>
				<text class="name">{{item.name}}</text>
				<text class="percent">{{item.overValue}} </text>
				<!-- :percentage="30" -->
				<uv-line-progress height="6" activeColor="#5daef9" :percentage="getPercentage(index)"
					:showText="false"></uv-line-progress>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch,
		computed
	} from "vue"
	import {
		reqIncomeRanking
	} from "@/api/model/chargingStation"
	import {
		reqGetRanking
	} from "@/api/model/photovoltaic"
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		title: {
			type: String,
			default: () => "强度排名"
		},
		moduleId: {
			type: [String, Number]
		}

	})

	const rankList = ref([])
	// console.log("测试的", props.list)

	const getData = () => {
		reqGetRanking().then(({
			data
		}) => {
			// let list = data.data
			let list = [{
					powerstationName: '振华园区',
					normalization: '680'
				},
				{
					powerstationName: '大长兴',
					normalization: '643'
				},
				{
					powerstationName: '小长兴',
					normalization: '638'
				},
				{
					powerstationName: '天津港',
					normalization: '632'
				},
				{
					powerstationName: '青岛港',
					normalization: '628'
				},
				{
					powerstationName: '上海鑫泽',
					normalization: '619'
				},
				{
					powerstationName: '舟山港',
					normalization: '615'
				},
				{
					powerstationName: '常州',
					normalization: '609'
				}
			]
			list.forEach((item, index) => {
				item.position = index + 1;
				item.name = item.powerstationName;
				item.overValue = item.normalization;
			});
			rankList.value = list;
		})

	}

	// 获取特定项的百分比
	const getPercentage = (index) => {
		return percentageList.value[index] || 0
	}
	onMounted(() => {
		getData()
	})
	const percentageList = computed(() => {
		if (!rankList.value || rankList.value.length === 0) return []

		const max = Math.max(...rankList.value.map(obj => obj.overValue))
		if (max === 0) return rankList.value.map(() => 0)

		return rankList.value.map(item => Math.round(100 * (item.overValue / max)))
	})


	watch(() => props.moduleId, (newVal) => {}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	.power-ranking-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			height: 76rpx;
			margin-left: 46rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 76rpx;
		}

		.content {
			margin-top: 10rpx;
			padding-left: 30rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;

			.li {
				margin-bottom: 18rpx;

				.position {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
				}

				.name {
					margin-left: 30rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.percent {
					float: right;
					margin-right: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.van-progress {
					margin-top: 20rpx;
					width: 680rpx;
					border-radius: 12rpx;
				}
			}

		}
	}
</style>